let noUiSliderDemos = function () {

    let demo1 = function () {
        // slider
        let slider = document.getElementById('no-ui-slider-1');

        noUiSlider.create(slider, {
            start: 0,
            step: 2,
            range: {
                min: 0,
                max: 10
            },
            format: wNumb({
                decimals: 0
            })
        });

        // input
        let $sliderInput = $('#no-ui-slider-1-input');

        slider.noUiSlider.on('update', function (values, handle) {
            $sliderInput.val(values[handle]);
        });

        $sliderInput.change(function () {
            slider.noUiSlider.set(this.value);
        });
    };

    let demo2 = function () {
        // slider
        let slider = document.getElementById('no-ui-slider-2');

        noUiSlider.create(slider, {
            start: [0],
            connect: [true, false],
            step: 0.01,
            range: {
                min: [0],
                max: [10000]
            },
            format: wNumb({
                decimals: 2, // 小数位数
                thousand: ',', // 数字间隔符
                prefix: '¥', // 前缀
            })
        });

        // input
        let $sliderInput = $('#no-ui-slider-2-input');

        slider.noUiSlider.on('update', function (values, handle) {
            $sliderInput.val(values[handle]);
        });

        $sliderInput.change(function () {
            slider.noUiSlider.set(this.value);
        });
    };

    let demo3 = function () {
        // init slider
        let slider = document.getElementById('no-ui-slider-3');

        noUiSlider.create(slider, {
            start: [20, 80],
            connect: true,
            step: 1,
            tooltips: [
                wNumb({decimals: 0}),
                wNumb({decimals: 0})
            ],
            range: {
                min: 0,
                max: 200
            }
        });


        // init slider input
        let $sliderInput0 = $('#no-ui-slider-3-str-input');
        let $sliderInput1 = $('#no-ui-slider-3-end-input');
        let sliderInputs = [$sliderInput0, $sliderInput1];

        slider.noUiSlider.on('update', function (values, handle) {
            sliderInputs[handle].val(values[handle]);
        });
    };

    let demo4 = function () {
        // init slider
        let slider = document.getElementById('no-ui-slider-4');

        noUiSlider.create(slider, {
            start: 20,
            range: {
                min: 0,
                max: 100
            },
            pips: {
                mode: 'values',
                values: [20, 80],
                density: 4
            }
        });

        let $sliderInput = $('#no-ui-slider-4-input');

        slider.noUiSlider.on('update', function (values, handle) {
            $sliderInput.val(values[handle]);
        });

        $sliderInput.change(function () {
            slider.noUiSlider.set(this.value);
        });
    };

    let demo5 = function () {
        // init slider             

        let verticalSlider = document.getElementById('no-ui-slider-5');

        noUiSlider.create(verticalSlider, {
            start: 40,
            orientation: 'vertical',
            range: {
                min: 0,
                max: 100
            }
        });

        // init slider input
        let $sliderInput = $('#no-ui-slider-5-input');

        verticalSlider.noUiSlider.on('update', function (values, handle) {
            $sliderInput.val(values[handle]);
        });

        $sliderInput.change(function () {
            verticalSlider.noUiSlider.set(this.value);
        });
    };

    return {
        init: function () {
            demo1();
            demo2();
            demo3();
            demo4();
            demo5();
        }
    };
}();

$(document).ready(function () {
    noUiSliderDemos.init();
});


